<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../css/login.css">
    <style>
        #sc{
            display: block;
            margin-left: 100px;
            margin-bottom: 30px;
            cursor: pointer;
        }
        .spanspan{
          display: block;
          margin:0 0 10px 100px;
          
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div>
            <img src="	https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt="">
            <span>依《网络安全法》相关要求，即日起蘑菇街会员登陆需绑定手机。为保障您的账户安全及正常使用，如您尚未绑定，请尽快完成绑定，感谢您的理解和支持!</span>
        </div>
        
        <div>
            <div class="content">
                <div class="form-text">
                    <form>
                          <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                              <input type="text" name="name" class="form-control" id="username" placeholder="用户名">
                            </div>
                          </div> 
                          <span class="spanspan" name="namespan"></span>
                          <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                              <input type="password" name="pwd1" class="form-control" id="password" placeholder="密码">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-10">
                              <input type="password"  name="pwd2" class="form-control inputWidth"  placeholder="确认密码">
                              <span class="spanspan" name="pwdspan"></span>
                              
                            </div>
                          </div>
                
                          <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-10">
                              <input type="text"  name="vc" class="form-control inputWidth" id="ac" placeholder="验证码"> <br>
                              <span class="spanspan"></span>
                            </div>
                            
                          </div>
                            <a id="sc"></a>
                          
                
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <button type="submit" class="btn btn-default">注册</button>
                            </div>
                          </div>
                          <div class="form-group" name="msg">
                           
                          </div>
                    </form>
                </div>
            </div>
        </div>

    </header>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>

    <script>
        //获取验证码
        $('#sc').html(getVC()).click(function(){$(this).html(getVC())});

        //点击注册
        $('button').click(function(){
            setReg();
            return false;
        });
        //失去焦点后 判断用户是否存在
        $('[name="name"]').blur(function(){
          SelName();
        });

        async function SelName(){
          let name = $('[name="name"]').val();
          let res = await myPromiseAjax('../server/goods_select.php' , 'post' , {userName:name},'json');
          console.log($('[name="namespan"]').html(res.msg));
          
          
        }

        //发送注册请求的函数
        async function setReg(){
            //获取输入的数据
            let name = $('[name="name"]').val();
            let pwd1 = $('[name="pwd1"]').val();
            let pwd2 = $('[name="pwd2"]').val();
            let vc = $('[name="vc"]').val();
            let sc = $('#sc').html();

            //验证两次输入的密码是否一致
            if( pwd1 !== pwd2){
                window.alert("两次密码不一致");
                $('#sc').html(getVC());
                return;
            }
            if( vc.toLowerCase() !== sc.toLowerCase() ){
                window.alert("验证码错误！");
                $('#sc').html(getVC());
                return;
            }
            let res = await myPromiseAjax('../server/goods_reg.php','post', {userName:name,userPwd:pwd1},'json' );
            console.log(res);
            //注册成功跳转页面
            $('[name="msg"]').html(`<span>还有5秒跳转登录页</span><a href="./index.html">点击跳转首页</a>`);
            let num = 5;
            let time = setInterval(function(){
              num--;
              $('[name="msg"]').html(`<span>还有${num}秒跳转登录页</span><a href="./index.html">点击跳转首页</a>`);
            },1000)



        }

    </script>
    
</body>
</html>